<!--
  Generated template for the CartPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>cart</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <!--购物车的列表为空-->
  <div text-center *ngIf="list.length == 0">
    <img src="http://localhost:8090/framework/forStu/ajia_code/img/404/404_img2.png">
    <h3>--购物车的列表为空--</h3>
    <button ion-button color="secondary" block>去逛逛</button>
  </div>
  <!--购物车的列表不为空-->
  <ion-list>
    <ion-item-sliding *ngFor="let tmp of list;let myIndex=index">
      <ion-item>
      <ion-checkbox item-start [(ngModel)]="tmp.isSelected" (ngModelChange)="handleSelect()"></ion-checkbox>
      <ion-thumbnail item-end>
        <ion-grid>
          <ion-row>
            <ion-col>
              <img [src]="'http://localhost:8090/framework/forStu/ajia_code/'+tmp.pic">
            </ion-col>
            <ion-col>
              <h2>{{tmp.title | slice:0:20}}...</h2>
              <h2 style="color:red">{{tmp.price | currency:'CNY'}}</h2>
              <button (click)="modifyCount(myIndex,false)" class="my-btn">-</button><span 
              class="my-count">{{tmp.count}}
              </span><button (click)="modifyCount(myIndex,true)" class="my-btn">+</button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-thumbnail>
      </ion-item>
      <ion-item-options>
        <button ion-button color="danger">删除</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-grid>
    <ion-row align-items-center>
      <ion-col col-2>
        <ion-checkbox [(ngModel)]="isAllSelected" (ngModelChange)="selectAll()"></ion-checkbox>
      </ion-col>
      <ion-col col-6>
        全选 合计 {{calcAll() | currency:'CNY'}}
      </ion-col>
      <ion-col>
        <button (click)="jump()" ion-button color="danger" block>去结算</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>
